<template>
	<view>
		<view class="box-bg">
			<uni-nav-bar :fixed='true' left-icon="left" @clickLeft='handleBack' right-icon="search" title="补单"
				height="65px" color="#fff" backgroundColor="#7CAFE7" />
		</view>
		<view>
			<uni-list @scrolltolower="scrolltolower">
				<!-- <uni-list-item showArrow v-for="(item, index) in indexList" 
				:key="item.id" 
				title="省直第一租车"
				note="车型:商务车"
				clickable="true"
				@click="handleClickItem(item)">	
				</uni-list-item> -->
				<uni-list-item showArrow>
					<template v-slot:body>
						<text class="slot-box slot-text">用车人默认账号人</text>
					</template>
				</uni-list-item>
				<uni-list-item showArrow>
					<template v-slot:body>
						<text class="slot-box slot-text">补单人账号</text>
					</template>
				</uni-list-item>
				<uni-list-item showArrow>
					<template v-slot:body>
						<text class="slot-box slot-text">用车人数</text>
					</template>
					<template v-slot:footer>
						<uni-number-box class="slot-number" @change="changeValue" />
					</template>
				</uni-list-item>
				<uni-list-item showArrow>
					<template v-slot:body>
						<text class="slot-box slot-text">开始时间</text>
					</template>
					<template v-slot:footer>
						<!-- :border="false" -->
						<uni-datetime-picker  style="text-align: right;" type="datetime" return-type="timestamp" v-model="startTime"/>	
					</template>
				</uni-list-item>
				<uni-list-item showArrow>
					<template v-slot:body>
						<text class="slot-box slot-text">结束时间</text>
					</template>
					<template v-slot:footer>
						<uni-datetime-picker  style="text-align: right;" type="datetime" return-type="timestamp" v-model="startTime"/>
					</template>
				</uni-list-item>
				<uni-list-item showArrow>
					<template v-slot:body>
						<text class="slot-box slot-text">目的地</text>
					</template>
					<template v-slot:footer>
						<uni-easyinput style="border: none;"  placeholder="请输入目的地" />
					</template>
				</uni-list-item>
				<uni-list-item showArrow>
					<template v-slot:body>
						<text class="slot-box slot-text">车牌号</text>
					</template>
					<template v-slot:footer>
						<uni-easyinput style="border: none;"  placeholder="请输入车牌号" />
					</template>
				</uni-list-item>
				<uni-list-item showArrow>
					<template v-slot:body>
						<text class="slot-box slot-text">厂牌型号</text>
					</template>
					<template v-slot:footer>
						<uni-easyinput style="border: none;"  placeholder="请输入厂牌型号" />
					</template>
				</uni-list-item>
				<uni-list-item showArrow>
					<template v-slot:body>
						<text class="slot-box slot-text">车辆属性</text>
					</template>
					<template v-slot:footer>
						<uni-easyinput style="border: none;"  placeholder="请输入车辆属性" />
					</template>
				</uni-list-item>
				<uni-list-item showArrow>
					<template v-slot:body>
						<text class="slot-box slot-text">车辆类型</text>
					</template>
					<template v-slot:footer>
						<uni-easyinput style="border: none;"  placeholder="请输入车辆类型" />
					</template>
				</uni-list-item>
				<uni-list-item showArrow>
					<template v-slot:body>
						<text class="slot-box slot-text">是否需要司机</text>
					</template>
					<template v-slot:footer>
						<uni-data-checkbox :localdata="sexs" />
					</template>
				</uni-list-item>
				<uni-list-item showArrow>
					<template v-slot:body>
						<text class="slot-box slot-text">驾驶员</text>
					</template>
					<template v-slot:footer>
						<uni-easyinput style="border: none;"  placeholder="请输入车牌号" />
					</template>
				</uni-list-item>
				<uni-list-item showArrow>
					<template v-slot:body>
						<text class="slot-box slot-text">联系电话</text>
					</template>
					<template v-slot:footer>
						<uni-easyinput style="border: none;"  placeholder="请输入车牌号" />
					</template>
				</uni-list-item>
				<uni-list-item showArrow>
					<template v-slot:body>
						<text class="slot-box slot-text">驾驶证类型</text>
					</template>
					<template v-slot:footer>
						<uni-easyinput style="border: none;"  placeholder="请输入车牌号" />
					</template>
				</uni-list-item>
				<uni-list-item showArrow>
					<template v-slot:body>
						<text class="slot-box slot-text">用车事由</text>
					</template>
					<template v-slot:footer>
						<uni-easyinput style="border: none;"  placeholder="请输入车牌号" />
					</template>
				</uni-list-item>
				<uni-list-item showArrow>
					<template v-slot:body>
						<text class="slot-box slot-text">备注</text>
					</template>
					<template v-slot:footer>
						<uni-easyinput style="border: none;"  placeholder="请输入车牌号" />
					</template>
				</uni-list-item>
			</uni-list>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';

	const indexList = ref([]);
	
	const groupStyle = ref({
		'background-color': '#fff'
	});

	const startTime = ref('')
	const sexs = ref([
		{
							text: '是',
							value: 0
						}, {
							text: '否',
							value: 1
						}
	])
	onLoad(() => {
		loadmore();
	});

	const scrolltolower = () => {
		loadmore();
	};

	const loadmore = () => {
		for (let i = 0; i < 20; i++) {
			indexList.value.push({
				id: i
			});
		}
	};

	function handleBack() {
		uni.navigateBack();
	}
	//  点击列表项
	function handleClickItem(item) {
		alert(item.id);
		// 跳转到详情页 并传递列表id
		uni.navigateTo({
			url: '/pages/use/car/detail/index?id=' + item.id
		})

	}
</script>

<style lang="scss" scoped>
	.slot-box {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
		}
	.slot-text {
			flex: 1;
			font-size: 14px;
			color: #797e84;
			margin-right: 10px;
		}
	
</style>